#app {
  .sidebar-layout {
    background: #F6F9FF url('../assets/background.jpg') no-repeat 0 0;
    background-size: 100% auto;
    .main-container {
      margin-left: $sideBarWidth;
      padding-left: 20px;
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 100%;
      transition: margin-left .28s;
    }

    .sidebar-container {

      transition: width 0.28s;
      width: $sideBarWidth !important;

      background: #fff;

      @include themeify () {
        background-color: themed('menuBg');
      }

      height: calc(100% - 20px);
      margin: 0 0 20px 20px;
  
      border-radius: 4px;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
      font-size: 0px;
      overflow: hidden;

      .sidebar-icon {
        margin-right: 12px !important;
      }

      // reset element-ui css
      .horizontal-collapse-transition {
        transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
      }

      .scrollbar-wrapper {
        overflow-x: hidden !important;
        // height: calc(100% - 40px);
        height: 100%;
      }

      .el-scrollbar__bar.is-vertical {
        right: 0px;
      }

      .el-scrollbar {
        height: 100%;
      }

      &.has-logo {
        .el-scrollbar {
          height: calc(100% - 50px);
        }
      }

      .is-horizontal {
        display: none;
      }

      a {
        display: inline-block;
        width: 100%;
        text-decoration: none;
        overflow: hidden;
      }

      .svg-icon {
        font-size: 20px;
        /*1221*/
        margin-right: 16px;
      }

      .sub-el-icon {
        margin-right: 12px;
        margin-left: -2px;
      }


      .el-menu {
        border: none;
        height: 100%;
        width: 100% !important;
      }


      // menu hover
      .submenu-title-noDropdown,
      .el-sub-menu__title {
        padding-left: 20px !important;
        font-size: 16px;
        font-weight: 600;
        @include themeify () {
          background-color: themed('menuBg') !important;
          border-left: 0px;
          /*1221  border-left: 0px solid themed('menuLeft')*/
          color: themed('menuText') !important;
        }

        &:hover {

          // background-color: $menuHover !important;
          @include themeify () {
            background-color: themed('menuHover') !important;
          }
        }
      }

      .el-menu-item {
        // padding-left: 15px !important;
        border: 0;
        font-size: 16px;

        // border-left: 5px solid #fff;
        @include themeify () {
          border-left: 0px;
          /*1221 border-left: 5px solid themed('menuLeft') !important;*/
          color: themed('menuText') !important;
        }
      }
      :deep(.svg-icon){
        width: 20px !important;
      }
      .el-menu-item.is-active {
        font-weight: 400;

        @include themeify () {
          color: themed('menuActiveText') !important;
          background-color: themed('menuHover') !important;
          border-left: 0px !important;
          /*1221 border-left: 5px solid themed('menuLeft') !important;*/
        }
        
        // border-left: 5px solid $hightline;
      }

      .is-active>.el-sub-menu__title {

        // color: $subMenuActiveText !important;
        @include themeify () {
          color: themed('subMenuActiveText') !important;
        }
      }

      .is-active>.svg-icon,
      .is-active>i,
      .is-active>.el-sub-menu__title>.svg-icon,
      .is-active>.el-sub-menu__title>i {
        color: #72A1FF;
      }

      & .nest-menu .el-sub-menu>.el-sub-menu__title,
      & .el-sub-menu .el-menu-item {
        padding-left: 46px !important;
        min-width: $sideBarWidth !important;
        font-size: 14px;
        border-left: 4px solid transparent;

        @include themeify () {
          border-left: 0px;

        }
        color: #3C475D;

        &.is-active {
          font-weight: 600;
          color: $mainColor;
          background-color: $menuActiveBg;
          border-left: 4px solid $mainColor;
          @include themeify () {
            background-color: themed('menuHover') !important;
            border-left: 0px;
           
            /*border-left: 5px solid themed('hightline') !important;*/
          }
        }

        &:hover {

          // background-color: $subMenuHover !important;
          @include themeify () {
            background-color: themed('subMenuHover') !important;
          }
        }

        .svg-icon {
          margin-right: 0px;
        }

      }
    }

    &.hideSidebar {
      .sidebar-container {
        width: 54px !important;
      }

      .main-container {
        margin-left: 54px;
      }

      .el-menu-item {
        &>span {
          height: 0;
          width: 0;
          overflow: hidden;
          visibility: hidden;
          display: inline-block;
        }
      }

      .submenu-title-noDropdown {
        // padding: 0 !important;
        position: relative;

        .el-tooltip {
          padding: 0 !important;

          .svg-icon {
            margin-left: 20px;
          }

          .sub-el-icon {
            margin-left: 19px;
          }
        }
      }

      .el-sub-menu {
        overflow: hidden;

        &>.el-sub-menu__title {
          padding: 0 !important;
          border-left: 0 !important;

          .svg-icon {
            margin-left: 14px;
          }

          .sub-el-icon {
            margin-left: 19px;
          }

          .el-sub-menu__icon-arrow {
            display: none;
          }
        }
      }

      .el-menu--collapse {
        .sidebar-icon {
          margin-right: 0 !important;
        }
        .el-sub-menu {
          &>.el-sub-menu__title {
            &>span {
              height: 0;
              width: 0;
              overflow: hidden;
              visibility: hidden;
              display: inline-block;
            }
          }
        }
      }
    }

    .el-menu--collapse .el-menu .el-sub-menu {
      min-width: $sideBarWidth !important;
    }

    // mobile responsive
    .mobile {
      .main-container {
        margin-left: 0px;
      }

      .sidebar-container {
        transition: transform .28s;
        width: $sideBarWidth+20 !important;
      }

      &.hideSidebar {
        .sidebar-container {
          pointer-events: none;
          transition-duration: 0.3s;
          transform: translate3d(-$sideBarWidth, 0, 0) !important;
        }
      }
    }

    .withoutAnimation {

      .main-container,
      .sidebar-container {
        transition: none;
      }
    }
  }

}

// when menu collapsed
.el-menu--vertical {
  &>.el-menu {
    .svg-icon {
      margin-right: 16px;
    }

    .sub-el-icon {
      margin-right: 12px;
      margin-left: -2px;
    }
  }

  .nest-menu .el-sub-menu>.el-sub-menu__title,
  .el-menu-item {
    &:hover {

      // you can use $subMenuHover
      // background-color: $menuHover !important;
      @include themeify () {
        background-color: themed('menuHover') !important;
        border-left: 5px solid themed('hightline') !important;
      }

    }
  }

  // the scroll bar appears when the subMenu is too long
  >.el-menu--popup {
    max-height: 100vh;
    overflow-y: auto;

    @include themeify () {
      background-color: themed('menuBg') !important;
    }

    .el-menu-item {
      @include themeify () {
        background-color: themed('menuBg') !important;
        border-left: 5px solid themed('menuBg') !important;
        color: themed('menuText');
      }

      &.is-active {
        @include themeify () {
          color: themed('menuActiveText') !important;
        }
      }

      &:hover {
        @include themeify () {
          border-left: 5px solid themed('menuBg') !important;
        }
      }
    }

    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #99a9bf;
      border-radius: 20px;
    }
  }
}

.sidear-icon {
  margin-right: 10px;
  height: 20px;
  width: 20px;
}